<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row style="text-align: left;">
          <el-form-item>
            <el-input v-model="filters.goods" placeholder="商品名称/编码:"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.shopaccount" placeholder="店铺名称/编码:"></el-input>
          </el-form-item>

          <el-form-item>
            <el-select v-model="filters.platform_sort" placeholder="平台类目:" style="width: 200px;">
              <el-option label="全部" value="-1">全部</el-option>
              <el-option label="图书文娱电子书" value="0">图书文娱电子书</el-option>
              <el-option label="手机数码" value="1">手机数码</el-option>
              <el-option label="电脑办公" value="2">电脑办公</el-option>
              <el-option label="个护化妆" value="3">个护化妆</el-option>
              <el-option label="生鲜农贸" value="4">生鲜农贸</el-option>
              <el-option label="礼品特点" value="5">礼品特点</el-option>
              <el-option label="电工电器" value="6">电工电器</el-option>
              <el-option label="服饰鞋靴" value="7">服饰鞋靴</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.brand" placeholder="品牌:" style="width: 200px;">
              <el-option label="全部" value="-1">全部</el-option>
              <el-option label="新华" value="0">新华</el-option>
              <el-option label="华为" value="1">华为</el-option>
              <el-option label="伊利" value="2">伊利</el-option>
              <el-option label="耐克" value="3">耐克</el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="filters.isgrounding" placeholder="上下架:" style="width: 200px;">
              <el-option label="全部" value="-1">全部</el-option>
              <el-option label="上架" value="0">上架</el-option>
              <el-option label="下架" value="1">下架</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.marketprice" placeholder="市场价下区间:"
                      style="width: 180px;"></el-input>
          </el-form-item>
          -
          <el-form-item>
            <el-input v-model="filters.marketprices" placeholder="市场价上区间:"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="filters.commissionrate" placeholder="佣金比例上区间:"
                      style="width: 180px;"></el-input>
          </el-form-item>
          -
          <el-form-item>
            <el-input v-model="filters.commissionrates" placeholder="佣金比例下区间:"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="filters.estimatemoney" placeholder="预估佣金上区间:"
                      style="width: 180px;"></el-input>
          </el-form-item>
          -
          <el-form-item>
            <el-input v-model="filters.estimatemoneys" placeholder="预估佣金下区间:"></el-input>
          </el-form-item>

        </el-row>


        <el-row style="text-align: left;">

          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                       @click="findPage"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset"
                       type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button :label="$t('action.batchReviewSuccess')" @click="batchReviewSuccess()"
                       type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button :label="'已审核'" @click="review()"
                       type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button :label="'待审核'" @click="shouldReview()"
                       type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button :label="'审核未通过'" @click="failReview()"
                       type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button :label="'禁止分销'" @click="distributionForbid()"
                       type="primary"/>
          </el-form-item>


        </el-row>

      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                  @handleFilterColumns="handleFilterColumns">
      </table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table :height="350"
              :data="pageResult" :columns="detailColumns"
              @findPage="findPage" ref="CyTable"
              :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=true
              :showDetailOperation=false :showSelection="true"
              @handleEdit="handleEdit">
    </cy-table>

    <!--新增编辑界面-->
    <el-dialog
      width="40%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <p style="text-align:center">请填写禁止分销原因</p>
        <el-form-item>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="备注"
            v-model="textarea">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-button style="width: 200px;" type="primary" @click="handleClose">
              确定
            </el-button>
            <el-button style="width: 200px;" type="primary" @click="handleClose">
              关闭
            </el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import CyTable from "@/views/Core/CyTable"
  import KtButton from "@/views/Core/KtButton"
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
  import {format} from "@/utils/datetime"

  export default {
    components: {
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        imgUpload: this.utils.getUpLoadHost(),
        size: 'small',
        document_license: '',
        filters: {
          name: ''
        },
        filtersCyTable1: {},
        addShow: false,
        textarea: '',
        imgs: '',
        fileList: {},
        columns: [],
        warehouselist: [],
        filterColumns: [],
        detailColumns: [
          {prop: "goods", label: "商品", minWidth: 120},
          {prop: "shopaccount", label: "商家", minWidth: 120},
          {prop: "platformsort", label: "平台类目", minWidth: 120},
          {prop: "brands", label: "品牌", minWidth: 120},
          {prop: "marketprice", label: "市场价", minWidth: 120},
          {prop: "commissionrate", label: "佣金比例", minWidth: 120},
          {prop: "estimatemoney", label: "预估佣金", minWidth: 120},
          {prop: "isgroundings", label: "上下架", minWidth: 120},
          {prop: "status", label: "审核状态", minWidth: 120, formatter: this.yesOrNo}
        ],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        pageResultDetail: {
          "rows":
            [{
              "isgrounding": "0",
              "isgroundings": "上架",
              "shopaccount": "生鲜农贸有限责任公司/S00003",
              "platformsort": "生鲜农贸",
              "brands": "伊利",
              "goods": "烘焙原料 展艺无铝双效泡打粉 /8146491711",
              "estimatemoney": 5,
              "is_delete": "N",
              "commissionrate": "10",
              "id": 1,
              "platform_sort": 4,
              "brand": 2,
              "marketprice": 25,
              "status": "0"
            },
              {
                "isgrounding": "1",
                "isgroundings": "下架",
                "shopaccount": "耐克专卖店/S20005",
                "platformsort": "服饰鞋靴",
                "brands": "耐克",
                "goods": "黑骑士运动鞋/825437",
                "estimatemoney": 100,
                "is_delete": "N",
                "commissionrate": "15",
                "id": 2,
                "platform_sort": 7,
                "brand": 3,
                "marketprice": 680,
                "status": "0"
              }],
          "total": 2,
          "mock_title": "",
          "code": "0000"
        },

        preReviewDetail: {
          "rows":
            [{
              "isgrounding": "0",
              "isgroundings": "上架",
              "shopaccount": "佳能专卖店/S88881",
              "platformsort": "手机数码",
              "brands": "华为",
              "goods": "佳能D90/GT0051",
              "estimatemoney": 450,
              "is_delete": "N",
              "commissionrate": "10",
              "id": 1,
              "platform_sort": 4,
              "brand": 2,
              "marketprice": 4600,
              "status": "1"
            }],
          "total": 1,
          "mock_title": "",
          "code": "0000"
        },

        reviewFailDetail: {
          "rows":
            [{
              "isgrounding": "0",
              "isgroundings": "上架",
              "shopaccount": "海之音琴行/S76664",
              "platformsort": "礼品特点",
              "brands": "新华",
              "goods": "RecordingKing/ST0042",
              "estimatemoney": 150,
              "is_delete": "N",
              "commissionrate": "8",
              "id": 1,
              "platform_sort": 4,
              "brand": 2,
              "marketprice": 2000,
              "status": "2"
            }],
          "total": 1,
          "mock_title": "",
          "code": "0000"
        },

        distributionForbidDetail: {
          "rows":
            [{
              "isgrounding": "0",
              "isgroundings": "上架",
              "shopaccount": "屈臣氏专卖店/N66651",
              "platformsort": "个护化妆",
              "brands": "伊利",
              "goods": "屈臣氏爽肤水/SA8882",
              "estimatemoney": 15,
              "is_delete": "N",
              "commissionrate": "5",
              "id": 1,
              "platform_sort": 4,
              "brand": 2,
              "marketprice": 320,
              "status": "3"
            }],
          "total": 1,
          "mock_title": "",
          "code": "0000"
        },
        dialogImageUrl: '',

        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        printPage: false,
        dialogVisibleImage: false,
        detailDialogVisible: false,
        addDialogVisible: false,
        merchantVisible: false,//商户页面是否显示
        dataForm: {
          region: '',
          tradeCurrency: ''
        },
        deptData: [],
        deptTreeProps: {
          label: 'name',
          children: 'children'
        },
        roles: [],
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dataFormRules: {},
        rules: {
          data1: [
            {required: true, message: '选择一个日期', trigger: 'blur'}
          ],
          tradeCurrency: [
            {required: true, message: '请至少选择一个结算币别', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        this.filters.t = 'sellerCommodity'
        this.$refs.CyTable.findPage(this.filters)
      },
      //mock数据
      findPageMock: function () {
        this.$refs.CyTable.findPageMock(this.pageResultDetail)
      },
      clinkMock: function () {
        this.$refs.CyTable1.findPageMock(this.clickDetail)
      },
      // 根据日期查询数据
      findPageByDate: function (data) {
        this.filters.t = 'sellerCommodity'
        this.$refs.CyTable.findPageByDate(this.filters)
      },
      //弹窗关闭方法
      handleClose() {
        this.dialogVisible = false;
        this.$refs.dataForm.resetFields()
        this.textarea = '';
      },
      // 显示编辑界面
      handleEdit: function (params) {
        console.log(params);
        this.dialogVisible = true;
        this.operation = false;
        this.dataForm = Object.assign({}, params.row);
      },
      // 批量删除
      handleDelete: function (data) {
        var ids = '';
        for (var i = 0; i < data.params.length; i++) {
          ids = ids + data.params[i].id + ',';
        }
        data.t = 'sellerCommodity'
        data.ids = ids
        this.utils.request.deleteUserInfo(data, this.deleteInfoBack)
      },
      //删除callback
      deleteInfoBack(data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败, ', type: 'error'})
        }
        this.findPage();
      },

      //导入方法
      importexe() {
        this.printPage = true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //列表下载
      downloadExcel() {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let filename = "分销商品"
          this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
        }).catch(() => {

        });
      },
      // 显示新增界面
      handleAdd: function () {
        this.addDialogVisible = true
        this.operation = true
        this.dataForm.id = "";
        //this.dataForm={};
        if (this.$refs['dataForm'] != undefined) {
          this.$refs['dataForm'].resetFields();
        }
        this.dataForm.document_license = "";
      },
      // 打印
      print: function () {
        this.printPage = true
        this.operation = true
      },
      reset: function () {
        this.filters = {};
        this.findPage()
      },

      resetCyTable1: function () {
        this.filtersCyTable1 = {};
        this.clinkMock()
      },

      operationClick: function () {
        var this_ = this;
        this_.merchantVisible = false;
      },

      // 显示编辑界面
      handleDetail: function (params) {
        console.log(params)
        this.detailDialogVisible = true
        this.operation = false
        var this_ = this;
        this.$nextTick(function () {
          this_.dataForm = Object.assign({}, params.row);
        });
      },
      // 编辑
      submitForm: function () {
        this.detailDialogVisible = false;
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              params.t = 'payApplyForm';
              this.$message({message: '操作成功', type: 'success'})
              // this.utils.request.editUserInfo(params, this.editInfoBack)
            })
          }
        })
      },
      // 新增修改回调
      editInfoBack: function (data) {
        this.$message({message: '操作成功', type: 'success'})
        // if (data.code == '0000') {
        //   this.$message({message: '操作成功', type: 'success'})
        // } else {
        //   this.$message({message: '操作失败', type: 'error'})
        // }
        this.findPage();
        this.dialogVisible = false
        this.operation = false
        this.editLoading = false
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property])
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = []
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp;
      },

      // 批量审核通过
      batchReviewSuccess: function () {
        this.$refs.CyTable.batchOperationMock("审核通过");
      },

      batchAutoRefund: function () {
        this.$refs.CyTable.batchOperationMock("退款成功");
      },

      addMock: function (dataForm) {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
            })
          }
        })
      },
      yesOrNo: function (row, column, cellValue, index) {
        if (cellValue == 0) {
          return '已审核'
        } else if (cellValue == 1) {
          return '待审核'
        } else if (cellValue == 2) {
          return '审核未通过'
        } else if (cellValue == 3) {
          return '禁止分销'
        }
      },
      review: function () {
        this.findPageMock();
      },
      shouldReview: function () {
        this.$refs.CyTable.findPageMock(this.preReviewDetail)
      },
      failReview: function () {
        this.$refs.CyTable.findPageMock(this.reviewFailDetail)
      },
      distributionForbid: function () {
        this.$refs.CyTable.findPageMock(this.distributionForbidDetail)
      }

    },
    mounted() {
      this.findPageMock()
      this.initColumns()
    }

  }
</script>
